<template>
  <div class="flow_region" id="app">
    <div class="nodes-wrap">
      <div @click="backToDataFactory" style="margin: 10px; font-size: 16px">
        <Icon type="ios-arrow-back" /> 返回
      </div>
      <div
        v-for="item in nodeTypeList"
        :key="item.type"
        class="node"
        draggable="true"
        @dragstart="drag($event, item)"
      >
        <div style="width:100%;display:flex;">
          <div class="log">
            <img :src="item.logImg" alt="" />
          </div>
          <div class="name">{{ item.typeName }}</div>
        </div>
      </div>
    </div>
    <div class="flow-wrapMain">
      <div
        id="flowWrap"
        ref="flowWrap"
        class="flow-wrap"
        @drop="drop($event)"
        @dragover="allowDrop($event)"
      >
        <div id="flow">
          <div
            v-show="auxiliaryLine.isShowXLine"
            class="auxiliary-line-x"
            :style="{
              width: auxiliaryLinePos.width,
              top: auxiliaryLinePos.y + 'px',
              left: auxiliaryLinePos.offsetX + 'px',
            }"
          ></div>
          <div
            v-show="auxiliaryLine.isShowYLine"
            class="auxiliary-line-y"
            :style="{
              height: auxiliaryLinePos.height,
              left: auxiliaryLinePos.x + 'px',
              top: auxiliaryLinePos.offsetY + 'px',
            }"
          ></div>
          <div v-for="item in data.nodeList" :key="item.id">
            <flowNodeFlowchart
             v-if="item.type == `flowchart`"
            :id="item.id"
            :node="item"
            @setNodeName="setNodeName"
            @addFlowChartChildren="addFlowChartChildren"
            @deleteNode="deleteNode"
            @changeLineState="changeLineState"
          ></flowNodeFlowchart>
            <flowNode
             v-else
            :id="item.id"
            :node="item"
            @setNodeName="setNodeName"
            @addFlowChartChildren="addFlowChartChildren"
            @deleteNode="deleteNode"
            @changeLineState="changeLineState"
          ></flowNode>
          </div>
          
        </div>
      </div>
      <div class="footThreeContent">
        <div class="box">
          <div class="titles">历史记录</div>
          <div style="width: 560px; margin: auto">
            <Table
              :columns="historycolumns"
              :data="data.history"
              height="183"
            ></Table>
          </div>
        </div>
        <div class="box">
          <div class="titles">
            <div style="margin: 10px 0">可用变量</div>
            <div>
              <Input
                v-model="values"
                placeholder="请输入变量进行搜索"
                style="width: 300px"
              />
            </div>
            <div style="overflow-y: scroll; width: 100%; height: 125px">
              <Tree :data="dataTree" show-checkbox></Tree>
            </div>
          </div>
        </div>
        <div class="box">
          <div class="titles">计算过程</div>
          <div style="overflow-y: scroll; width: 100%; height: 170px">
            <div
              style="padding: 10px; font-size: 16px; border-top: 1px solid #ccc"
              v-for="(item, index) in jisuanguochengArr"
              :key="index"
            >
              <div>{{ index + 1 }} {{ item.value }}</div>
            </div>
          </div>
        </div>
      </div>

      <div style="text-align: right; margin: 5px 0">
        <Button type="primary" @click="backToDataFactory" style="margin: 0 20px"
          >提交</Button
        >
      </div>
    </div>
  </div>
</template>

<script>
import { jsPlumb } from "jsplumb";
import { nodeTypeList } from "./config/init";
import {
  jsplumbSetting,
  jsplumbConnectOptions,
  jsplumbSourceOptions,
  jsplumbTargetOptions,
} from "./config/commonConfig";
import methods from "./config/methods";
import data from "./config/data.json";
import flowNode from "./components/node-item";
import flowNodeFlowchart from "./components/node-item-flowchart";

export default {
  name: "FlowEdit",
  components: {
    flowNode,
    flowNodeFlowchart,
  },
  data() {
    return {
      values: "",
      dataTree: [
        {
          title: "年度净入库税收合计",
          expand: true,
          checked: true,
          children: [],
        },
        {
          title: "工业增长",
          expand: true,
          checked: true,
          children: [],
        },
        {
          title: "研发经费支出",
          expand: true,
          checked: true,
          children: [],
        },
        {
          title: "用地面积",
          expand: true,
          checked: true,
          children: [],
        },
        {
          title: "主要污染物排放量",
          expand: true,
          checked: true,
          children: [],
        },
        {
          title: "营业收入",
          expand: true,
          checked: true,
          children: [],
        },
        {
          title: "年平均职工人数",
          expand: true,
          checked: true,
          children: [],
        },
        {
          title: "亩均税收指标得分",
          expand: true,
          checked: true,
          children: [],
        },
        {
          title: "亩均增加值指标得分",
          expand: true,
          checked: true,
          children: [],
        },
        {
          title: "R&D占比指标得分",
          expand: true,
          checked: true,
          children: [],
        },
        {
          title: "全员劳动生产率指标得分",
          expand: true,
          checked: true,
          children: [],
        },
        {
          title: "修正系数",
          expand: true,
          checked: true,
          children: [],
        },
      ],
      historycolumns: [
        {
          title: "No",
          type: "index",
          width: 60,
          align: "center",
        },
        {
          title: "名称",
          key: "name",
        },
        {
          title: "操作",
          key: "active",
        },
        {
          title: "查看",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small",
                  },
                  style: {
                    marginRight: "10px",
                  },
                  on: {
                    click: () => {
                      this.Viewers(params);
                    },
                  },
                },
                "查看"
              ),
            ]);
          },
        },
      ],
      historyData: [],
      jsPlumb: null,
      currentItem: null,
      nodeTypeList: nodeTypeList,
      nodeTypeObj: {},
      data: {
        nodeList: [],
        lineList: [],
        history: [],
        nodeListBase: [],
      },
      selectedList: [],
      jsplumbSetting: jsplumbSetting,
      jsplumbConnectOptions: jsplumbConnectOptions,
      jsplumbSourceOptions: jsplumbSourceOptions,
      jsplumbTargetOptions: jsplumbTargetOptions,
      auxiliaryLine: { isShowXLine: false, isShowYLine: false }, //对齐辅助线是否显示
      auxiliaryLinePos: {
        width: "100%",
        height: "100%",
        offsetX: 0,
        offsetY: 0,
        x: 20,
        y: 20,
      },
      commonGrid: [5, 5], //节点移动最小距离
      selectModuleFlag: false, //多选标识
      rectAngle: {
        px: "", //多选框绘制时的起始点横坐标
        py: "", //多选框绘制时的起始点纵坐标
        left: 0,
        top: 0,
        height: 0,
        width: 0,
      },
    };
  },
  computed: {
    ListAllData() {
      return this.$store.state.dataFactory.ListAllData;
    },
    jisuanguochengArr() {
      return this.$store.state.dataFactory.jisuanguochengArr;
    },
    CalculationProcessValue() {
      return this.$store.state.dataFactory.CalculationProcessValue;
    },
  },
  mounted() {
    this.jsPlumb = jsPlumb.getInstance();
    this.initNodeTypeObj();
    this.initNode();
    this.fixNodesPosition();
    this.$nextTick(() => {
      this.init();
    });
    
  },
  methods: {
    ...methods,

    Viewers() {},
    initNodeTypeObj() {
      nodeTypeList.map((v) => {
        this.nodeTypeObj[v.type] = v;
      });
    },
    initNode() {
      this.data.history = this.ListAllData[this.$route.query.id].history;
      this.data.lineList = this.ListAllData[this.$route.query.id].lineList;
      this.ListAllData[this.$route.query.id].nodeList.map((v, index) => {
        console.log("__v_", v, index);
        this.ListAllData[this.$route.query.id].nodeList[
          index
        ].logImg = this.nodeTypeObj[v.type].logImg;
        this.ListAllData[this.$route.query.id].nodeList[
          index
        ].log_bg_color = this.nodeTypeObj[v.type].log_bg_color;
        this.data.nodeList.push(v);
      });
      this.data.nodeList = this.ListAllData[this.$route.query.id].nodeList;
    },
    backToDataFactory() {
      // this.$router.push({
      //   path: "/home/heroes/dataFactory"
      // });
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="less" scoped>
.flow_region {
  display: flex;
  width: 90%;
  height: 90%;
  // margin: 20px auto;
  // border: 1px solid #ccc;
  .nodes-wrap {
    width: 150px;
    height: 100%;
    border-right: 1px solid #ccc;
    .node {
      display: flex;
      height: 40px;
      width: 80%;
      margin: 10px auto;
      border: 1px solid #ccc;
      border-radius: 10px;
      line-height: 40px;
      &:hover {
        cursor: grab;
      }
      &:active {
        cursor: grabbing;
      }
      .log {
        width: 40px;
        height: 40px;
      }
      .name {
        width: 0;
        flex-grow: 1;
      }
    }
  }
  .flow-wrapMain {
    position: relative;
    overflow: hidden;
    outline: none !important;
    flex-grow: 1;
  }
  .flow-wrap {
    height: 70%;
    position: relative;
    overflow: hidden;
    outline: none !important;
    flex-grow: 1;
    background-image: url("../assets/point.png");
    #flow {
      position: relative;
      width: 100%;
      height: 100%;
      .auxiliary-line-x {
        position: absolute;
        border: 0.5px dashed #2ab1e8;
        z-index: 9999;
      }
      .auxiliary-line-y {
        position: absolute;
        border: 0.5px dashed #2ab1e8;
        z-index: 9999;
      }
    }
  }
}
.footThreeContent {
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  height: 25%;
  width: 100%;
  display: flex;
  .box {
    flex: 1;
    border-right: 1px solid #ccc;
    .titles {
      font-size: 20px;
      font-weight: 600;
      padding: 10px;
    }
  }
}
</style>

<style lang="less">
.jtk-connector.active {
  z-index: 9999;
  path {
    stroke: #150042;
    stroke-width: 1.5;
    animation: ring;
    animation-duration: 3s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    stroke-dasharray: 5;
  }
}
@keyframes ring {
  from {
    stroke-dashoffset: 50;
  }
  to {
    stroke-dashoffset: 0;
  }
}
</style>